<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name='viewport' id='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'/>
        <title>Line Folding Test Page</title>
        <style type='text/css'><%=require('./index.less').default%></style>
        <script type='text/javascript' src='./dist/linefold.js'></script>
    </head>
    <body>
		<ribbon><a href='https://github.com/frank-deng/linefold/'>Fork me on GitHub</a></ribbon>
        <div class='inputForm' id='inputForm'>
            <div class='inputItem'>
                <span translate="width">Width</span><!--
                --><input type='number' min='1' name='width' value='320'/>
            </div><!--
            --><div class='inputItem'>
                <span translate="fontSize">Font Size</span><!--
                --><input type='number' min='1' name='fontSize' value='16'/>
            </div><!--
            --><div class='inputItem'>
                <span translate="font">Font</span><!--
                --><input type='text' name='fontFamily' value='sans'/>
            </div><!--
            --><div class='inputItemGroup'>
                <label class='checkboxItem'>
                    <input type='checkbox' name='fontBold'/><!--
                    --><span translate="bold">Bold</span>
                </label><!--
                --><label class='checkboxItem'>
                    <input type='checkbox' name='fontItalic'/><!--
                    --><span translate="italic">Italic</span>
                </label>
            </div><!--
            --><div class='textInputTitle' translate="text">Text</div>
            <textarea class='textInput' name='textInput' rows='10'></textarea>
        </div>
        <div class='displayFormTitle' translate="effect" id='displayFormTitle'>Effect</div>
        <div class='displayForm' id='displayForm'>
            <canvas class='testCanvas' id='testCanvas'></canvas>
        </div>
    </body>
<% if('development'==(env.NODE_ENV||'').trim()){ %>
    <script src='__index__.js'></script>
<% }else{ %>
    <script><%=compilation.assets['__index__.js'].source()%></script>
<% } %>
</html>